<template>
	<cl-crud @load="onLoad">
		<template #slot-top-stats>
			<commission-count ref="commission-count"></commission-count>
		</template>

		<template #slot-datepicker>
			<div class="_top-filter">
				<div style="width:125px;">
					<el-select
						size="mini"
						class="time-type"
						v-model="selects.timeType"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>
				</div>
				<div style="width:350px;">
					<date-picker
						style="width:350px;"
						:datas="datas"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
				<div>
					<select-taobao
						class="selects"
						v-model="selects.pid"
						@change="val => refresh({ taobaoId: val, page: 1 })"
					></select-taobao>
				</div>
				<div>
					<select-adzone
						class="selects"
						ref="promotion"
						v-model="selects.positionId"
						@change="val => refresh({ positionId: val, page: 1 })"
					></select-adzone>
				</div>
				<div>
					<select-label
						v-model="selects.label"
						ref="selectlabel"
						@change="val => refresh({ label: val, page: 1 })"
					></select-label>
				</div>
				<div>
					<select-group
						v-model="selects.teamId"
						@change="val => refresh({ teamId: val, page: 1 })"
					></select-group>
				</div>
				<div>
					<select-staff
						class="selects"
						ref="selectstaff"
						v-model="selects.staffId"
						@change="val => refresh({ staffId: val, page: 1 })"
					></select-staff>
				</div>
				<el-button
					@click="employeeExport"
					v-permission="'crm:order:staffExport'"
					type="primary"
					style="margin-left:10px"
					size="mini"
				>
					<i class="el-icon-download"></i>导出报表
				</el-button>
			</div>
		</template>
	</cl-crud>
</template>

<script>
import CommissionCount from '@/components/order/commission-count';
import DatePicker from '@/components/order/date-picker';
import SelectStaff from '@/components/order/select-staff';
import SelectTaobao from '@/components/order/select-taobao';
import SelectAdzone from '@/components/order/select-adzone';
import SelectGroup from '@/components/order/select-group';
import SelectLabel from '@/components/order/select-label';
import { dateFormat, download } from '@/utils/index';
import moment from 'moment';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: '',
				teamId: '',
				label: ''
			},
			options: {
				label: [],
				departmentBelow: []
			},
			params: {
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime,
				timeType: 0,
				page: 1,
				size: 20
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime],
			item: null
		};
	},

	components: {
		CommissionCount,
		DatePicker,
		SelectStaff,
		SelectAdzone,
		SelectTaobao,
		SelectGroup,
		SelectLabel
	},
	methods: {
		// 下载报表
		employeeExport() {
			this.$service.order.staffExport(this.params).then(res => {
				download({
					data: res,
					fileName: `员工统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.order)
				.set('dict', {
					api: {
						page: 'staffStatistics'
					}
				})
				.set('table', {
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'validCommission'
						}
					},
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: 60
						},
						{
							label: '运营人',
							prop: 'staffName',
							align: 'center',
							'class-name': 'cursor'
						},
						{
							label: '全部单数',
							prop: 'orderNum',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '预估收入',
							prop: 'pubSharePreFee',
							align: 'center',
							sortable: true,
							emptyText: '0'
						},
						{
							label: '结算预估',
							prop: 'pubShareFee',
							align: 'center',
							sortable: true,
							emptyText: '0'
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],
					op: {
						visible: false
					},
					on: {
						'row-click': row => {
							let newParams = {};
							if (this.params.startTime && this.params.endTime) {
								newParams = {
									startTime: this.params.startTime,
									endTime: this.params.endTime
								};
							}
							this.$emit('showdetail', {
								staffId: row.staffId,
								title: row.staffName,
								...newParams
							});
						}
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入员工名称'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'slot-staff', 'flex1', 'search-key'],
					['slot-top-stats'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					const { subData } = await next(params);
					this.params = params;
					this.$refs['commission-count'].refresh(subData);
				})
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh(this.params);
		},
		refresh(params) {
			if (params.startTime) {
				this.params.startTime = params.startTime;
				this.params.endTime = params.endTime;
			}
			if (params.taobaoId) {
				this.$refs['promotion'].refresh({
					taobaoId: params.taobaoId
				});
			} else {
				this.$refs['promotion'].refresh();
			}
			if (params.positionId) {
				this.$refs['selectlabel'].refresh({
					positionId: params.positionId
				});
			} else {
				this.$refs['selectlabel'].refresh();
			}
			if (params.teamId) {
				this.$refs['selectstaff'].refresh({
					teamId: params.teamId
				});
			} else {
				this.$refs['selectstaff'].refresh();
			}
			if (params.timeType == 0) {
				params.prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				params.prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				params.prop = 'tkEarningTime';
			}
			this.crud.refresh(params);
		}
	}
};
</script>

<style lang="stylus" scoped>
.delete-row {
	margin-left: 10px;
	cursor: pointer;

	&:hover {
		color: red;
	}
}

._top-filter-other {
	display: flex;
	width: 100px;
	margin-left: 10px;
	line-height: 0;
}

._top-filter-other-text {
	margin-left: 2px;
}
.label-list {
		flexBox(center, center, row, wrap)
		.add-label {
			color $main-color
			cursor pointer
			transition .3s
			&:hover {
				opacity .8
			}
		}
		.el-icon-plus {
			font-size 14px
			color $main-color
		}
	}
</style>
